﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="" />
      
    <!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
    <title>无人岛</title>
    <!-- BOOTSTRAP CORE STYLE -->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FONT AWESOME ICON STYLE -->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
    <!-- CUSTOM STYLE CSS -->
    <link href="assets/css/style.css" rel="stylesheet" />
    
 <!-- 评论框样式 -->   
<link rel="stylesheet" href="assets/css/semantic.css" type="text/css" />
<link rel="stylesheet" href="assets/css/zyComment.css" type="text/css" />
<style type="text/css" media="print, screen">  
	label {
	    font-weight: bold;
	}
	a {
		font-family: Microsoft YaHei;
	}
</style> 	
 <!-- 评论框样式 end-->   
</head>


<body>
    <div id="header">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 logo-div">
                        <div class="logo-inner text-center">
                            <div class="logo-name">
                                <a href="index.html">
                                    <img src="assets/img/me.jpg" class="img-circle" />
                                </a>
                            </div>

                        </div>

                    </div>
                    <div class="col-md-8 header-text-top " id="about">


<!-- 标题 -->
 <div  id="container"></div>
                </div>
            </div>
        </div>
    </div>
    <!--END HEADER SECTION-->
    <div class="info-sec">
        <div class="container">
            <div class="col-md-10">
            <!--导航条-->
            <nav  class="navbar navbar-default" role="navigation">
				<div class="container-fluid">

				<div>
					<ul class="nav navbar-nav">
						<li class="active"><a href="/index.html">首页</a></li>
						<li><a href="#">归档</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								分类
								<b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li><a href="#">分类1</a></li>
								<li><a href="#">分类2</a></li>
								<li><a href="#">分类3</a></li>
								<li class="divider"></li>
								<li><a href="#">分类4</a></li>
								<li class="divider"></li>
								<li><a href="#">分类5</a></li>
							</ul>
						</li>
					</ul>
				</div>
				</div>
			</nav>
			</div>
			
                <div class="col-md-2">
                    <div class="social-link">
                    
                         <button type="button" class="btn btn-primary " style="text-shadow: black 5px 3px 3px;"><span class="glyphicon glyphicon-leaf"></span> 注册</button>
                        <button onclick="window.open('/admin','_blank');" type="button" class="btn btn-primary " style="text-shadow: black 5px 3px 3px;"><span class="glyphicon glyphicon-user"></span> 登陆</button>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <div class="copyrights">由 Jhon Deo 设计</div>
    
    
    <div class="container">

        <div class="row">
			
			<!--左空白-->
			<div class="col-md-2 "></div>

			<div class="col-md-8" >
			<!--文章组件-->
			    <!--标题 -->
            <div id="article_area" class="contextcss" >
	            <div id="title" align="center">
	            <h3 class="nofollow">
					<strong>Loading</strong>
				</h3>
	            <p><em></em></p>
				<br>
				</div>
				
				    <!--摘要-->
				<div id="breaf" class="jumbotron well">
					<p class="lead"><tt><var><samp>摘要:Loading</samp></var></tt></p>
				</div>
				
					<!--正文-->
				<div id="context">
				<p>Loading</p><br><br><br>
				</div></div>
				
				<!--喜欢和不喜欢 base64-->
				<div id="likeArea" align="center" class="sx">
				<img id="useful" width="65" height="93" src="" />
				&nbsp
				<img id="like" width="65" height="93" src="" />
				&nbsp
				<img id="unlike" width="65" height="93" src="" />
	
				</div>
				
	            <!-- 修改按钮 和 删除按钮 -->
	            <div id="editAndDel" align="right">
	            <span id="editThis" class="glyphicon glyphicon-pencil sx" style="color: rgb(90, 110, 198); font-size: 15px; text-shadow: rgb(104, 104, 255) 3px 4px 7px; margin：10px;" > 修改  </span>
	            <span id="delThis"  class="glyphicon glyphicon-trash sx" style="color: rgb(90, 110, 198); font-size: 15px; text-shadow: rgb(104, 104, 255) 3px 4px 7px;"> 删除</span>
	            </div>
 				<!-- 评论区 -->
 
<div id="articleComment" class="commentcss"></div>
<script type="text/javascript" src="assets/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="assets/js/zyComment.js"></script>
<script type="text/javascript">
var agoComment = [
				  {"id":1,"userName":"游客1","time":"2014-04-04","sortID":0,"content":"第一条评论"},
				  {"id":2,"userName":"游客2","time":"2014-04-04","sortID":0,"content":"第二条评论"},
				  {"id":3,"userName":"站长","time":"2014-04-04","sortID":1,"content":"第一条评论的回复"},
				  {"id":4,"userName":"站长","time":"2014-04-04","sortID":2,"content":"第二条评论的回复"},
				  {"id":5,"userName":"游客3","time":"2014-04-04","sortID":0,"content":"第三条评论"},
				  {"id":6,"userName":"游客2","time":"2014-04-04","sortID":4,"content":"第二条评论的回复的回复"},
				  ];
$("#articleComment").zyComment({
	"width":"355",
	"height":"33",
	"agoComment":agoComment,
	"callback":function(comment){
		console.info("填写内容返回值：");
		console.info(comment);
		// 添加新的评论
		$("#articleComment").zyComment("setCommentAfter",{"id":123, "name":"name", "content":"content", "time":"2014-04-14"});
	}
});
</script>  
           
           </div>
            <!--右空白-->
            <div class="col-md-2 "></div>
           
         </div>

      </div>


    <!--底部代码-->
    <br><br>
<footer class="bottom">
  <div class="container" style="text-align:right">
     &copy; 2017 无人岛 |  designed by Jhon Deo
 </div>
</footer>
    <!-- END FOOTER SECTION -->
    




</body>

<!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
    <!-- CORE JQUERY -->
    <script src="assets/js/jquery-1.11.1.js"></script>
    <!-- BOOTSTRAP SCRIPTS -->
    <script src="assets/js/bootstrap.js"></script>
<!-- 加载文章内容  请求接口 /article/getarticle -->
 <script type="text/javascript">
    $.getUrlParam = function (name) {
       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
       var r = window.location.search.substr(1).match(reg);
       if (r != null) return unescape(r[2]); return null;
    }
            
     $(function () {  
  		  //得到文章id
          //alert($.getUrlParam('id'));
         $.ajax({  
             url: '/article/getArticleById',  
             type: 'POST',  
             dataType: 'json', 
			 data:'id='+$.getUrlParam('id'), 
             timeout: 1000,  
             cache: false,  
             beforeSend: LoadFunction, //加载执行方法    
             error: erryFunction,  //错误执行方法    
             success: succFunction //成功执行方法    
         })  
         function LoadFunction() {  
             $("#list").html('加载中...');  
         }  
         function erryFunction() {  
             $("#list").html('加载失败...');  
         }  
         function succFunction(data) {  
             $("#list").html('');  
  
             var json = eval(data); //数组         
                
                 //循环获取数据  
                 var title = data.title;  
                 var content = data.content; 
                 var publishTime = data.publishTime;
                 var password = data.password;  
                 
                 var newDate = new Date();
				 newDate.setTime(publishTime * 1000);
                 $("#article_area").empty();
                 $("#article_area").html("<div id='title' align='center'><h3 class='nofollow'><strong>"+title+"</strong></h3><p><font size='3'>发布时间:"+newDate.toLocaleString()+"</font></p><br></div><!--摘要--><div id='breaf' class='jumbotron well'><p class='lead'><tt><var><samp>摘要:"+content.substring(0,100)+"</samp></var></tt></p></div><!--正文--><div id='content'>"+content+"<br><br><br></div>");  
               
         }  
     
     
     $("#editThis").click(function(){
		  location.href = "/admin/page-edit.html?id="+$.getUrlParam('id');
		});
     
     $("#delThis").click(function(){
		  $.ajax({
		  type: 'POST',
		  url: '/article/delArticle',
		  data: 'id='+$.getUrlParam('id'),
		  dataType: "json",
		  success: function(data){//返回data类得到成员result
	              location.href = "/index.html";         
	            }
	  	  });  
		});
     
     $("#useful").click(function(){
	//id为fat-btn的按钮的点击事件
 	//不要用input type="submit" 会跳转提交 要使用click事件的return false 或 jquery.form.js插件的ajaxForm才行 
	 	$.ajax({
		  type: 'POST',
		  url: '/article/like',
		  data: 'code=1&id='+$.getUrlParam('id'),
		  dataType: "json",
		  success: function(data){//返回data类得到成员result
	              alert("评分成功");         
	            }
	  	  });
	 });
 
     
     $("#like").click(function(){
		  $.ajax({
		  type: 'POST',
		  url: '/article/like',
		  data: 'code=2&id='+$.getUrlParam('id'),
		  dataType: "json",
		  success: function(data){//返回data类得到成员result
	              alert("评分成功");         
	            }
	  	  }); 
		});
		
	 $("#unlike").click(function(){
		  $.ajax({
		  type: 'POST',
		  url: '/article/like',
		  data: 'code=3&id='+$.getUrlParam('id'),
		  dataType: "json",
		  success: function(data){//返回data类得到成员result
	              alert("评分成功");         
	            }
	  	  });  
		});
		
     }); 
     
      
    </script> 
</html>